<template>
  <div>
    <div class="header-bg"></div>
    <CustomerNav></CustomerNav>
    <transition :name="transitionName" v-on:after-enter="afterAnimation" v-on:before-enter="beforeAnimation">
      <router-view></router-view>
    </transition>
    <CustomerFooter v-if="showFooter"></CustomerFooter>
  </div>
</template>

<script>
import CustomerNav from './CustomerNav'
import CustomerFooter from './CustomerFooter'
export default {
  name: 'CustomerIndex',
  data () {
    return {
      showFooter: true
    }
  },
  methods: {
    beforeAnimation () {
      this.showFooter = false
    },
    afterAnimation () {
      this.showFooter = true
    }
  },
  components: {CustomerFooter, CustomerNav},
  watch: {
    '$route' (to, from) {
      this.showFooter = false
      if (to.meta.index > from.meta.index) {
        this.transitionName = 'el-fade-in'
      } else {
        this.transitionName = 'el-zoom-in-bottom'
      }
    }
  }
}
</script>

<style scoped>
  .header-bg {
    width: 100%;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url("../../assets/images/customer/header_bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
</style>
